<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>我的订单</title>
<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="/static/js/common.js?v=0.01"></script>
<link type="text/css" rel="stylesheet" href="/static/js/dropload/dropload.css">
<script type="text/javascript" src="/static/js/dropload/dropload.min.js"></script>

<link type="text/css" rel="stylesheet" href="/static/css/order_index.css">
<style>
.tab-na{ display:none; width:100%; height:4px; left:0;bottom:0; position:absolute; background:#5c8dff; }
.am-tabs-tab-active .tab-na{ display:block;}
</style>
</head>
<body>

<div id="pages">
    <div>
        <div>
            <div class="g-am-init g-reset">
                <div class="am-tabs am-tabs-top" style="overflow:hidden;">
                    <div role="tablist" class="am-tabs-bar" tabindex="0">
						<!--状态导航-->
						{volist name='$orderstatus' id='v'}
                        <div role="tab" data-status="{$v.status}" class="{if condition="$v.status eq $search.status"}am-tabs-tab-active{/if} am-tabs-tab">
                            <div class="g-tabs g-relative">
                                <div>{$v.name}</div>
								{if condition="$v.StatusNum gt 0"}
								<div class="g-absolute" style="display: block; height: 30px; width: 30px; top: 42px; left: 60px; background: rgb(246, 111, 98); border-radius: 15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 20px; line-height: 30px; font-family: &quot;&quot;; color: white; z-index: 20;">{$v.StatusNum}</div>
								{/if}
							</div>
							<div class='tab-na'></div>
                        </div>
						{/volist}
						<!--状态导航 End-->
                    </div>
					
                    <div class="am-tabs-content am-tabs-content-animated" id="container" style="transform: translateX(0%) translateZ(0px);">
					
            <div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-active">
						
				<!--搜索-->

<div class="g-flex g-search-box" style="background: rgb(239, 239, 244);">
<style>
{empty name='orderinfo'}.g-search-box{ height:0;overflow:hidden;}{/empty}
.tab-na{ display:none; width:100%; height:4px; left:0;bottom:0; position:absolute; background:#5c8dff; }
.am-tabs-tab-active .tab-na{ display:block;}
.am-search-cancel{ margin-right:-80px; user-select: none!important; }
.am-search-start{ }
.am-search-start .am-search-synthetic-ph{ box-sizing:border-box; text-align:left; }
.am-search-start .am-search-synthetic-ph-placeholder{ visibility:hidden; }
.am-search-start .am-search-cancel{ margin-right:0px; opacity: 1; }
.am-search-start .am-search-clear{ display:flex; }
</style>
<form class="am-search g-col{if condition="$search.key neq ''"} am-search-start{/if}" action="">
    <div class="am-search-input">
        <div class="am-search-synthetic-ph" style="width: 100%;">
            <span class="am-search-synthetic-ph-container">
                <i class="am-search-synthetic-ph-icon"></i>
                <span class="am-search-synthetic-ph-placeholder">订单号/姓名/电话</span>
			</span>
        </div>
		<input type='hidden' name='page' value="{$search.page}">
		<input type='hidden' name='status' value="{$search.status}">
        <input type="search" name='key' autocomplete='off' class="am-search-value" style="outline:0;" value="{$search.key}" placeholder="订单号/姓名/电话">
        <a class="am-search-clear"></a>
    </div>
    <div class="am-search-cancel" style="transition:all ease .3s">搜索</div>
</form>
<span class="iconfont icon-xq- g-fs-40 g-black-light" style="line-height: 88px; margin-left: 14px; padding-right: 30px;"></span>

</div>
<script>
$(function(){
	$('.am-search-value').focus(function(){
		$('form.am-search').addClass('am-search-start');
		if($(this).val() == ''){
			$('span.am-search-synthetic-ph-placeholder').css('visibility','visible');
			$('a.am-search-clear').css('display','none');
		}else{
			
		}
	});
	$('.am-search-value').on('input propertychange',function(){
		if($(this).val() == ''){
			$('span.am-search-synthetic-ph-placeholder').css('visibility','visible');
			$('a.am-search-clear').css('display','none');
		}else{
			$('span.am-search-synthetic-ph-placeholder').css('visibility','hidden');
			$('a.am-search-clear').css('display','flex');
		}
	});
	$('a.am-search-clear').click(function(){
		$('.am-search-value').val('');
		$('.am-search-value').focus();
		//$('.am-search-value').trigger('propertychange');
	});
	$('.am-search-cancel').click(function(){
		$("[name='page']").val('1');
		$('form.am-search').submit();
	});
});
</script>

<!--搜索 End-->
				

				<div class="common-pull-scroll pull-view-wrap scroll-container-0" style="padding-bottom: 0px;overflow-x:hidden;">
					{notempty name='orderinfo'}
					<div class='scroll-item' style="transform: translateY(0px);">
						<div>
							<div id='order-items'>
								{volist name='orderinfo' id='v'}
								<a class="g-reset g-flex g-fd-c g-bg-white g-m-b" data-id="{$v.OrderID}" href="{:url('Retail/order_detail',['id'=>$v.OrderID])}">
									<div>
										<div class="g-flex g-jc-sb g-bb g-pd">
											<div>订单编号：{$v.OrderID}</div>
											<div class="g-blue-middle" style="color: rgb(92, 141, 255);">{$v.Status|__order_status2}</div></div>
									</div>
									<div>
										{volist name='$v.Product' id='y'}
										<div>
											<div class="g-flex g-pd g-bb">
												<img src="{$y.MainImg}" alt="" class="g-img-140">
												<div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
													<div class="g-twoline g-fs-30">{$y.ProductName}</div>
													<small class="g-black-light">
														<span></span>
													</small>
													<div class="g-flex g-jc-sb">
														<div class="g-orange-dark">￥{$y.ProductPrice}</div>
														<span class="g-black-middle">x{$y.ProductVol}</span></div>
												</div>
											</div>
										</div>
										{/volist}
									   
										<div class="g-bb g-pd g-flex g-fd-rr">
											<div class="g-orange-dark">总计：￥{$v.Amount}</div>
											<div class="g-col"></div>
										</div>
									</div>
									<div class="common-order-popover">
										<div class="g-row g-pd-tb g-pd-lr">
											<div class="g-flex g-jc-sb g-ai-c">
												<div class="__target" style="width: 10vw; position: relative;">
													<div class="__top">
														<div class="__triangle" style="display: none;"></div>
														<div class="__popover" style="display: none;"></div>
													</div>
												</div>
												<div class="g-row" style="width: 86vw;">
													{$v.Status|__order_status_btns_2}
												</div>
											</div>
										</div>
									</div>
								</a>
								{/volist}
								
							</div>
						</div>
					</div>
					{else /}
					<div style="transform: translateY(0px);">
						<div class="g-tc" style="margin-top: 25%;">
							<img src="http://oss.nawen1413.com/images/empty_state.png" alt="" class="g-m-b">
						</div>
					</div>
					<div class="_dropload _scroll" style="transform: translateY(0px);">
						<div class="_status">
							<span class="g-fs-26">没有内容可供显示</span>
						</div>
					</div>
					{/notempty}
				</div>
            </div>

                    </div>
                </div>
            </div>
			
            <div class="c-share-back" data-func="goback">
                <div class="__content">
                    <i class="iconfont icon-goback __icon"></i>
                </div>
            </div>
			
        </div>
    </div>
</div>

<style>
.dropload-down{ height:100px;  }
.dropload-up, .dropload-down{ font-size:26px; }
.dropload-refresh, .dropload-update, .dropload-load, .dropload-noData{ height:100px; line-height:100px; }
.dropload-load .loading { height: 30px; width: 30px; border-radius: 100%; margin: 12px; border: 4px solid #666; }

.layui-layer-loading .layui-layer-content{ width:120px; height:48px; background-size:cover; }

.layui-m-layer-msg .layui-m-layercont{ font-size:28px; line-height:44px; padding:20px 40px;}
.layui-m-layer2 .layui-m-layercont i{ background:#5c8dff; }

</style>

<script>

function goback(){
	location.href = "{:url('Retail/mine')}";
}

//根据主体显示内容设置窗口尺寸
function resizeMain(){
	let _mh = jQuery(window).height() - jQuery('.g-search-box').outerHeight() - jQuery('.am-tabs-bar').outerHeight();
	console.log(_mh);
	jQuery('.scroll-container-0').is(':visible').css('min-height',_mh).css('height',_mh);
}

$(function(){

	//状态切换
	$("[role='tablist']").find("[role='tab']").each(function(navIndex){
		$(this).click(function(){
			let status = parseInt($(this).attr('data-status'));
			$("[name='status']").val(status);
			$("[name='page']").val(1);
			$("[name='key']").val('');
			$('form.am-search').submit();
		});
	});
	//计算主体高度
	let _mh = $(window).height() - $('.g-search-box').outerHeight() - $('.am-tabs-bar').outerHeight();
	console.log(_mh);
	$('.scroll-container-0').css('min-height',_mh).css('height',_mh);

	$('.scroll-container-0').scroll(function () {
        var scrollTop = $(this).scrollTop(); //卷去高度
        var scrollHeight = $(this).height(); //可视区域高度
        var windowHeight = $('.scroll-item',this).height();
		
		//console.log('stop:'+ scrollTop+"，doch:"+scrollHeight+"，winh:"+windowHeight);
		
		if (canloadpage && scrollTop + scrollHeight >= windowHeight && lastscrollTop < scrollTop) {
			canloadpage = false;
			loadPage();
	　　}
		lastscrollTop = scrollTop;
	});
	
	bindOrderStatusBtnAction();
	
});



function bindOrderStatusBtnAction(){
	//具体订单状态按钮
	$('.order-status-btn').unbind('click');
	$('.order-status-btn').bind('click',function(){
		let action = $(this).attr('data-action');
		order_status_btn_do($(this).parents('a').attr('data-id'),action);
		return false;
	});
}


var canloadpage = true;
var lastscrollTop = 0;
function loadPage(){
	let page = parseInt($("[name='page']").val());
	let postData = {
		'page' : ++page,
		'key' : "{$search.key}",
		'status' : "{$search.status}"
	}
	let iii = layer.open({type:2,shade:false});
	$.ajax({
		url : "{:url('Retail/order_loadpage')}",
		type : "POST",
		dataType : "JSON",
		data : postData,
		success : function(e){
			layer.close(iii);
			if(e.data.list.length > 0){
				$("[name='page']").val(e.data.page);
			}
			parseOrderItemHtml(e.data.list);
		},error : function(){
		},complete : function(){
			layer.close(iii);
			canloadpage = true;
		}
	});
}
//状态按钮
function order_status_btn_do(_orderid,action){
	if(action == 'quxiao'){
		AjaxJson("{:url('Retail/order_action')}",{'orderid':_orderid,'act':'quxiao'},function(e){
			layer.open({
				content: e.info
				,skin: 'msg'
				,time: 2
				,end : function(){
					location.reload();
				}
			});
		});
	}else if(action == 'zhifu'){
		location.href = "{:url('Shop/pay')}?orderid="+_orderid;
	}else if(action == 'pinzheng'){
		location.href = "{:url('Retail/order_checkrep')}?orderid="+_orderid;
	}else if(action == 'wuliu'){
		location.href = "{:url('Retail/order_logistics')}?orderid="+_orderid;
	}else if(action == 'shouhuo'){
		AjaxJson("{:url('Retail/order_action')}",{'orderid':_orderid,'act':'shouhuo'},function(e){
			layer.open({
				content: e.info
				,skin: 'msg'
				,time: 2
				,end : function(){
					location.reload();
				}
			});
		});
	}
}
</script>


<!--引入时 绝对不能用type='text/javascript'，否则打死你都找不到错在哪-->
<script src="__JS__/jsrender.min.js"></script>

<script type="text/x-jsrender" id="ordertpl">
<%for%>
<a class="g-reset g-flex g-fd-c g-bg-white g-m-b" href="{:url('Retail/order_detail')}?id=<%:OrderID%>">
	<div>
		<div class="g-flex g-jc-sb g-bb g-pd">
			<div>订单编号：<%:OrderID%></div>
			<div class="g-blue-middle" style="color: rgb(92, 141, 255);"><%:Status%></div>
		</div>
	</div>
	<div>
		<!--商品循环-->
		<%for Product%>
		<div>
			<div class="g-flex g-pd g-bb">
				<img src="<%:MainImg%>" alt="" class="g-img-140">
				<div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
					<div class="g-twoline g-fs-30"><%:ProductName%></div>
					<small class="g-black-light">
						<span></span>
					</small>
					<div class="g-flex g-jc-sb">
						<div class="g-orange-dark">&yen;<%:ProductPrice%></div>
						<span class="g-black-middle">x<%:ProductVol%></span></div>
				</div>
			</div>
		</div>
		<%/for%>
		<div class="g-bb g-pd g-flex g-fd-rr">
			<div class="g-orange-dark">总计：<%:OrderAmount%></div>
			<div class="g-col"></div>
		</div>
	</div>
	<div class="common-order-popover">
		<div class="g-row g-pd-tb g-pd-lr">
			<div class="g-flex g-jc-sb g-ai-c">
				<div class="__target" style="width: 10vw; position: relative;">
					<div class="__top">
						<div class="__triangle" style="display: none;"></div>
						<div class="__popover" style="display: none;"></div>
					</div>
				</div>
				<div class="g-row" style="width: 86vw;">
					<%:buttons%>
				</div>
			</div>
		</div>
	</div>
</a>
<%/for%>
</script>

<script>
$.views.settings.delimiters("<%", "%>");
function parseOrderItemHtml(orderData){
	$('._dropload').remove();
	
	if(orderData.length < 1 && $('._dropload').length < 1){
		let _t = '<div class="_dropload _scroll" style="transform: translateY(0px);"><div class="_status"><span class="g-fs-26" style="line-height:3em;">我是有底线的</span></div></div>';
		if($('#order-items').length < 1){
			return;
		}
		$('#order-items').append(_t);
		return;
	}

	var template = $.templates("#ordertpl");
	var html = template.render(orderData);
	
	let head,foot = '';
	if($('#order-items').length < 1){
		//当前没显示订单数据
		head = "<div class='scroll-item' style='transform: translateY(0px);'><div><div id='order-items'>";
		foot = "</div></div></div>";
		$('.scroll-container-0').html(head+html+foot);
	}else{
		$('#order-items').append(html);
	}
	bindOrderStatusBtnAction();
	console.log(html);
}
</script>



</body>
</html>